<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />

    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <!-- ImportBattery Swap Records按钮的Template -->
    <Abnormal_record ref="Abnormal_record"></Abnormal_record>
  </div>
</template>

<script>
import Abnormal_record from "./cus/Abnormal_record";
export default {
  components: {
    Abnormal_record
  },
  data() {
    return {
      searchData: {
        userName: "",
        phone: "",
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "User Name",
          prop: "userName",
          width: 220
        },
        { type: "input", placeholder: "Phone", prop: "phone", width: 180 },
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 220,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 220,
          change: val => {
            this.searchData.endTime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              userName: "",
              phone: "",
              beginTime: "",
              endTime: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "User Name", prop: "userName" },
        { label: "Phone", prop: "phone" },
        {
          label: "yesterday Battery Swaps Number",
          prop: "yesterdayNum",
          formatter: e => (e.yesterdayNum ? e.yesterdayNum : "--")
        },
        {
          label: "Package Battery Swaps Number",
          prop: "exchangeNum",
          formatter: e => (e.exchangeNum ? e.exchangeNum : "--")
        },
        { label: "Battery Swaps Time", prop: "lastExchangeTime" },
        {
          label: "Operations",
          type: "button",
          width: 170,
          btnList: [
            {
              label: "Battery Swap Log",
              type: "primary",
              size: "mini",
              plain: true,
              handle: row => {
                this.$refs.Abnormal_record.show_fun(row);
              }
            }
          ]
        }
      ],
      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    userDetailsCall() {},

    async getData() {
      var res = await this.apis.centerUserExchangeNumList({
        userName: this.searchData.userName,
        phone: this.searchData.phone,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
